父子元素同时使用rotate的效果叠加

 今天在做页面设计的时候使用到了transform：rotate（） ；突然有一个想法，如果父元素使用了rotate ，子元素也使用了rotate，效果会发生什么叠加，叠加效果又是什么样的呢？？？

所以做了一个测试：

首先通过布局使父子元素的X轴和Y轴重合，然后改变父子元素rotateX的值，观察效果。

效果如下：（图片来自百度）

1、父元素 rotateX(0deg) 子元素rotateX(0deg)：

2、父元素 rotateX(45deg) 子元素rotateX(0deg)：

3、父元素 rotateX(0deg) 子元素rotateX(45deg)：

4、父元素 rotateX(45deg) 子元素rotateX(45deg)：

总结：1、可以从结果中发现，存在效果叠加的情况。

           2、按照我之前的设想，效果叠加可能是在三维空间中的效果叠加，即父元素旋转45度之后，子元素载旋转45度，相当于子元素旋转了90，这样的效果应该是子元素不可见了，但其实在实际效果中并不是如此，可以从结果4可以看出来。实际的效果叠加是顺序叠加，而不是三维空间下的效果叠加。父元素旋转45度之后，如果子元素再旋转45度，是在父元素旋转之后形成的子元素状态为初始状态情况下旋转45度，这样就相当于是一个新图像旋转了45度，不能叠加达到90度消失的效果。